/** Colors */
$white: #fff;
$primary: #37a866;
$dark: #111;

/** Common */
$body-color: $dark;

/** Typography */
$font-family-sans-serif: "Inter", sans-serif;
$font-family-monospace: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;

$font-size-base: 1rem;
$line-height-base: 1.5;

$font-weight-normal: 400;
$font-weight-bold: 700;

$font-size-sm: $font-size-base - 0.1;

$text-color: $body-color;
$text-font-size: $font-size-base;
$text-line-height: $line-height-base;
$text-link-padding: 0 0.12rem;
$text-link-background: #F7FAFC;
$text-link-background-hover: #C6F6D5;
$text-spacing: 0 0 1rem;

/** Headings */
$heading-color: $body-color;
$heading-spacing: 0 auto 0.8rem;
$heading-line-height: 1.5;
$heading-font-weight: 700;

$h1-font-size: 42px;
$h2-font-size: 36px;
$h3-font-size: 28px;
$h4-font-size: 25px;
$h5-font-size: 20px;
$h6-font-size: 15px;

/** Content */
$container-max-width: 800px;
$container-gutter: 15px;

/** Links */
$link-color: $primary;
$link-hover-color: $body-color;

/** Code */
$code-font-family: $font-family-monospace;
$code-background-color: transparent;
$code-text-align: left;
$code-line-height: $line-height-base;
$code-tab-size: 2;
$code-font-weight: $font-weight-normal;

/** Buttons */
$btn-border-width: 1px;
$btn-border-style: solid;
$btn-border-color: transparent;
$btn-border: $btn-border-width $btn-border-style $btn-border-color;
$btn-border-radius: 2px;
$btn-box-shadow: none;

$btn-primary-color: $white;
$btn-primary-background: #48bb78;
$btn-primary-border: #48bb78;
$btn-primary-hover-color: $white;
$btn-primary-hover-background: #2f855a;
$btn-primary-hover-border: #2f855a;
$btn-primary-outline-color: #48BB78;
$btn-primary-outline-background: transparent;
$btn-primary-outline-border: #48BB78;
$btn-primary-outline-hover-color: $white;
$btn-primary-outline-hover-background: #48bb78;
$btn-primary-outline-hover-border: #48bb78;

$btn-secondary-color: #1A202C;
$btn-secondary-background: #EDF2F7;
$btn-secondary-border: #EDF2F7;
$btn-secondary-hover-color: $white;
$btn-secondary-hover-background: #1A202C;
$btn-secondary-hover-border: #1A202C;
$btn-secondary-outline-color: #1A202C;
$btn-secondary-outline-background: transparent;
$btn-secondary-outline-border: #E2E8F0;
$btn-secondary-outline-hover-color: $white;
$btn-secondary-outline-hover-background: #1A202C;
$btn-secondary-outline-hover-border: #1A202C;

$btn-line-height: 1.6;
$btn-height: 44px;
$btn-padding-y: 0;
$btn-padding-x: 20px;
$btn-font-size: 15px;
$btn-border-width: 2px;
$btn-border-radius: 3px;
$btn-font-weight: $font-weight-bold;

$btn-small-line-height: 1.6;
$btn-small-height: 36px;
$btn-small-padding-y: 0;
$btn-small-padding-x: 14px;
$btn-small-font-size: 12px;
$btn-small-border-width: 1px;
$btn-small-border-radius: 4px;
$btn-small-font-weight: $font-weight-normal;

$btn-large-line-height: 1.6;
$btn-large-height: 54px;
$btn-large-padding-y: 0;
$btn-large-padding-x: 24px;
$btn-large-font-size: 17px;
$btn-large-border-width: 2px;
$btn-large-border-radius: 4px;
$btn-large-font-weight: $font-weight-bold;

/** Header */
$header-background-color: $white;
$header-padding-x: 0;
$header-padding-y: 0.25rem;
$header-navigation-spacing: 1em;
$header-container-max-width: $container-max-width;
$header-border: 4px solid #48BB78;
$header-border-bottom: 1px solid #EDF2F7;

/** Footer */
$footer-background: #1A202C;
$footer-font-size: $font-size-sm;
$footer-color: #A0AEC0;
$footer-link-color: $white;
$footer-padding: 2em 1em;

/** Tables */
$table-color: $body-color;
$table-border: none;
$table-odd-background: transparent;
$table-spacing: 1rem;
$table-background-color: $white;
$table-font-size: $font-size-sm;
$table-line-height: $line-height-base;
$table-cell-padding: 0.85rem 2rem 0.85rem 0;
$table-box-shadow: none;
$table-cell-border: 1px solid #E2E8F0;

/** Prims */
$prism-color: #F7FAFC;
$prism-background: #2D3748;
$prism-font-family: $font-family-monospace;
$prism-line-height: 22px;
$prism-text-shadow: none;
$prism-border-radius: 0.5rem;
$prism-tab-size: 2;
$prism-block-border-radius: $prism-border-radius;
$prism-block-padding: 0 0 1em;
$prism-block-margin: 0.5rem 0 1.5rem;
$prism-code-border-radius: $prism-border-radius;
$prism-code-padding: 0.1em;

/** Photo Grid */
$photo-grid-gutter: 6px;
$photo-grid-col-max-size: 12%;
$photo-grid-picture-spacing: ($photo-grid-gutter / 2) 0;
$photo-grid-picture-background: #EDF2F7;
$photo-grid-picture-background-loaded: #1A202C;
